<template>
    <div>
        <BasicTable @register="registerTable">
        <template #toolbar>
            <Space>
                <span>总金额:<span class="text-red-500">{{ sumData  }}</span>元</span> <a-button type="primary" @click="handleExport" :loading="exportLoading">充值日报表导出</a-button> 
            </Space>
        </template>
    </BasicTable>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'MemberList',
});
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, BasicColumn } from '@/components/Table';
import { downloadBlob } from '@/utils/file/download';
import { Space } from 'ant-design-vue';
import { defHttp } from '@/utils/http/axios';
import { useMessage } from '@/hooks/web/useMessage';
import dayjs from 'dayjs';
const { createMessage } = useMessage();

const columns: BasicColumn[] = [
    {
        title: '订单编号',
        dataIndex:'sn',
        width: 150,
        fixed: 'left',
    },
    {
        title: '姓名',
        dataIndex: 'name',
        width: 150,
    },
    {
        title: '手机号',
        dataIndex:'mobile',
        width: 150,
    },
    {
        title: '充值金额',
        dataIndex: 'amount',
        width: 150,
    },
    {
        title: '充值方式',
        dataIndex: 'payMethodName',
        width: 150,
    },
    {
        title: '三方手续费',
        dataIndex: 'taxRatio',
        width: 150,
        customRender: ({ record }) => {
            return `${(record.amount * record.taxRatio).toFixed(2)}`
        }
    },
    {
        title: '实际进账',
        dataIndex: 'actualAmount',
        width: 150,
        customRender: ({ record }) => {
            return `${(record.amount - record.amount * record.taxRatio).toFixed(2)}`
        }
    },
    {
        title: '状态',
        dataIndex:'status',
        width: 150,
        customRender: ({ record }) => {
            return record.status === '0' ? '未支付' : record.status === '1' ? '已支付' : record.status === '2' ? '部分退款' : '全额退款'
        }
    },
    {
        title: '当前余额',
        dataIndex: 'balance',
        width: 150,
    },
    {
        title: '充值时间',
        dataIndex: 'createDate',
        width: 150,
        customRender: ({ record }) => {
            return `${dayjs(record.createDate).format('YYYY-MM-DD HH:mm')}`
        }
    },
];
const exportLoading = ref(false);
const sumData = ref(0)
const [registerTable, { getForm }] =
    useTable({
        api: '/admin/recharge_order/member',
        useSearchForm: true,
        columns,
        showIndexColumn: true,
        indexColumnProps: {
            fixed: 'left',
        },
        formConfig: {
            schemas: [
                {
                    component: 'Input',
                    label: '姓名或手机号',
                    field: 'name',
                    componentProps: {
                        allowClear: true,
                    },
                },
                {
                    component: 'Select',
                    label: '支付状态',
                    field: 'status',
                    componentProps: {
                        options: [
                            { label: '已支付', value: '1' },
                            { label: '部分退款', value: '2' },
                            { label: '全部退款', value: '3' },
                        ]
                    },
                },
                {
                    component: 'Select',
                    label: '支付状态',
                    field: 'payMethodId',
                    componentProps: {
                        options: [
                            { label: '支付宝', value: '1' },
                            { label: '微信', value: '2' },
                        ]
                    },
                },
                {
                    component: 'RangePicker',
                    label: '日期范围',
                    field: '[startTime, endTime]',
                    componentProps: {
                        valueFormat: 'YYYY-MM-DD 00:00:00',
                    }
                }
            ]
        },
        pagination: true,
        bordered: true,
        afterFetch: () => {
            defHttp.get({ url: '/admin/recharge_order/memberSum' })
            .then(res => {
                sumData.value = res.amount
            })
            // console.log(await defHttp.get({ url: '/admin/recharge_order/memberSum' }), 'dada')
        }
    });
const handleExport = async() => {
    try {
        exportLoading.value = true;
        const formData = getForm().getFieldsValue()
        if (formData.startTime || formData.endTime || formData.name || formData.status || formData.payMethodId) {
            const res = await defHttp.get({ url: '/admin/recharge_order/exportExcel', responseType: 'blob', params: { ...getForm().getFieldsValue() } }, { isReturnNativeResponse: true });
            downloadBlob(res);
        } else {
            createMessage.error('请选择筛选条件');
        }
    } catch (error) {
        console.log(error);
    } finally {
        exportLoading.value = false;
    }
}
</script>
 